<template>
  <div class="boxrenwu">
    <van-nav-bar
      title="任务中心"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      :border="false"
    />
    <div class="renwutop" :class="{ activeooo: flag }">
      <p>本轮签到(07.04-07.11)</p>

      <div class="renwutopone">
        <div>
          <img
            src="@/assets/img/home/Home-img/renwuimg/Button-钻石.png"
            alt=""
          />
        </div>
        <div>
          <img src="@/assets/img/home/Home-img/renwuimg/bxx.png" alt="" />
        </div>
        <div>
          <img src="@/assets/img/home/Home-img/renwuimg/zz.png" alt="" />
        </div>
        <div>
          <img src="@/assets/img/home/Home-img/renwuimg/mg.png" alt="" />
        </div>
        <div>
          <img
            src="@/assets/img/home/Home-img/renwuimg/Button-钻石.png"
            alt=""
          />
        </div>
        <div>
          <img src="@/assets/img/home/Home-img/renwuimg/mz.png" alt="" />
        </div>
      </div>

      <div class="renwutoptwo" :class="{ active: flag }">
        <div class="renwutoptwo-left">
          <span>已连续签到</span>
          <div><i>2</i>天</div>
        </div>
        <div class="renwutoptwo-right">
          <div class="hezi">
            <span>7天奖励</span>
            <div class="hezione">
              <img src="@/assets/img/home/Home-img/renwuimg/bx.png" alt="" />
            </div>
          </div>
          <div class="hezi">
            <span>14天奖励</span>
            <div class="hezitwo">
              <img
                src="@/assets/img/home/Home-img/renwuimg/Button-钻石.png"
                alt=""
              />
            </div>
          </div>
          <div class="hezi">
            <span>21天奖励</span>
            <div class="hezithree">
              <img
                src="@/assets/img/home/Home-img/renwuimg/Button-钻石.png"
                alt=""
              />
            </div>
          </div>
          <div class="hezi">
            <span>30天奖励</span>
            <div>
              <img src="@/assets/img/home/Home-img/renwuimg/bx2.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 图标部分 -->
    <div class="renwutopthree">
      <van-icon name="arrow-up" @click="flag = !flag" size="24" />
    </div>

    <!-- 中间内容部分 -->
    <div class="renwucenter">
      <!-- tab栏 -->
      <div class="tabber-top">
        <ul>
          <li @click="index = 0">新手任务<span v-show="index == 0"></span></li>
          <li @click="index = 1">成长任务<span v-show="index == 1"></span></li>
        </ul>
      </div>
      <!-- 内容部分 -->
      <div class="tabber-down">
        <div v-show="index == 0">
          <ul>
            <li>
              <span class="tabber-down-one">
                <i>关注1位用户</i>
                <h6>
                  <strong
                    ><img
                      src="@/assets/img/home/Home-img/renwuimg/Button-钻石.png"
                      alt="" /></strong
                  >&emsp;<em>10</em>
                </h6>
              </span>
              <span class="tabber-down-two">
                <i class="one" @click="btn" :class="{ lingqu: isshow }">{{
                  lingqutext
                }}</i>
              </span>
            </li>
            <li>
              <span class="tabber-down-one">
                <i>发布1个小纸条</i>
                <h6>
                  <strong
                    ><img
                      src="@/assets/img/home/Home-img/renwuimg/Button-钻石.png"
                      alt="" /></strong
                  >&emsp;<em>10</em>
                </h6>
              </span>
              <span class="tabber-down-two">
                <i class="two">去看看</i>
              </span>
            </li>
            <li>
              <span class="tabber-down-one">
                <i>在任意房间送礼1次</i>
                <h6>
                  <strong
                    ><img
                      src="@/assets/img/home/Home-img/renwuimg/Button-钻石.png"
                      alt="" /></strong
                  >&emsp;<em>10</em>
                </h6>
              </span>
              <span class="tabber-down-two">
                <i class="two">去看看</i>
              </span>
            </li>
            <li>
              <span class="tabber-down-one">
                <i>分享谁是凶手APP</i>
                <h6>
                  <strong
                    ><img
                      src="@/assets/img/home/Home-img/renwuimg/Button-钻石.png"
                      alt="" /></strong
                  >&emsp;<em>10</em>
                </h6>
              </span>
              <span class="tabber-down-two">
                <i class="two">去看看</i>
              </span>
            </li>
            <li id="end">
              <span class="tabber-down-one">
                <i>充值任意金额</i>
                <h6>
                  <strong
                    ><img
                      src="@/assets/img/home/Home-img/renwuimg/Button-钻石.png"
                      alt="" /></strong
                  >&emsp;<em>10</em>
                </h6>
              </span>
              <span class="tabber-down-two">
                <i class="five">已领取</i>
              </span>
            </li>
          </ul>
        </div>
        <div v-show="index == 1" class="up">这里是成长任务内容</div>
      </div>
    </div>

    <div class="renwucenter-end">
      <div>完成全部新手任务，即可解锁以下任务，超多免费钻石每</div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    btn() {
      this.isshow = !this.isshow;
      this.isshow = this.lingqutext = "已领取";
    },
  },
  data() {
    return {
      isshow: false,
      flag: false,
      index: 0,
      lingqutext: "领取",
    };
  },
};
</script>

<style lang='scss'>
.boxrenwu {
  background-color: #f4f6f5;
  background-image: url(@/assets/img/home/Home-img/renwuimg/bjdb.png);
  background-position: center -65px;
  background-size: 1140px 550px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  .van-nav-bar {
    line-height: 2.375rem;
    background-color: #1a1a1a00;
  }
  .van-nav-bar__title {
    color: white;
    font-size: 32px;
  }
  .van-icon-arrow-left:before {
    color: white;
    font-size: 32px;
  }
  .van-nav-bar__content {
    margin: 30px 0px;
  }
  .renwutop {
    margin: -30px auto;
    width: 670px;
    height: 407px;
    background-color: white;
    border-radius: 16px;
    padding-top: 40px;
    overflow: hidden;
    transition: all 0.5s;
    margin-top: 43px;
  }
  .renwutop p {
    font-size: 28px;
    display: block;
    margin-left: 34px;

    // margin-top: 20px;
  }
  .renwutopone {
    width: 612px;
    height: 94px;
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    margin: 0 auto;
  }

  .renwutopone div {
    width: 74px;
    height: 74px;
    border-radius: 12px;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .renwutopone div:nth-child(1):after {
    content: "✔";
    width: 20px;
    height: 20px;
    background: #63d197;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    position: absolute;
    color: white;
    bottom: 0px;
    right: 0px;
  }
  .renwutopone div:nth-child(1)::before {
    content: "x10";
    width: 20px;
    height: 20px;
    // background: #63d197;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    position: absolute;
    color: gray;
    top: 0px;
    right: 0px;
  }
  .renwutopone div:nth-child(2):after {
    content: "✔";
    width: 20px;
    height: 20px;
    background: #63d197;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    position: absolute;
    color: white;
    bottom: 0px;
    right: 0px;
  }
  .renwutopone div:nth-child(3):after {
    content: "x10";
    width: 20px;
    height: 20px;
    // background: #63d197;
    // border-radius: 50%;
    text-align: center;
    line-height: 20px;
    position: absolute;
    color: gray;
    top: 0px;
    right: 0px;
  }
  .renwutopone div:nth-child(5):after {
    content: "x40";
    width: 20px;
    height: 20px;
    // background: #63d197;
    // border-radius: 50%;
    text-align: center;
    line-height: 20px;
    position: absolute;
    color: gray;
    top: 0px;
    right: 0px;
  }
  .renwutopone img {
    max-width: 100%;
    min-width: 40%;
    max-height: 100%;
    min-height: 40%;
  }
  .renwutoptwo {
    width: 612px;
    height: 140px;
    margin: 0 auto;
    display: flex;
    padding-top: 30px;
    justify-content: space-between;
    overflow: hidden;
  }
  .renwutoptwo-left {
    width: 120px;
  }
  .renwutoptwo-left span {
    display: block;
    width: 120px;
    height: 34px;
    font-size: 24px;
    text-align: center;
  }
  .renwutoptwo-left div {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    font-size: 30px;
    text-align: center;
    line-height: 60px;
    margin-top: 14px;
  }
  .renwutoptwo-left div i {
    font-style: normal;
    color: #eb7d3c;
  }
  .renwutoptwo-right {
    width: 470px;
    height: 100px;
    // background-color: aqua;
    display: flex;
    justify-content: space-between;
  }

  .renwutoptwo-right span {
    line-height: 34px;
    display: block;
    width: 102px;
    height: 30px;
    font-size: 18px;
    text-align: center;
  }
  .hezi {
    width: 102px;
    height: 102px;
  }
  .hezi div {
    width: 74px;
    height: 74px;
    margin: 0 auto;
    text-align: center;
    line-height: 74px;
    border-radius: 12px;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .hezione::after {
    content: "x20";
    width: 20px;
    height: 20px;
    // background: #63d197;
    // border-radius: 50%;
    text-align: center;
    line-height: 20px;
    position: absolute;
    color: gray;
    top: 0px;
    right: 0px;
  }
  .hezitwo::after {
    content: "x200";
    width: 22px;
    height: 20px;
    // background: #63d197;
    // border-radius: 50%;
    text-align: center;
    line-height: 25px;
    position: absolute;
    color: gray;
    top: 0px;
    right: 0px;
  }
  .hezithree::after {
    content: "x500";
    width: 25px;
    height: 20px;
    // background: #63d197;
    // border-radius: 50%;
    text-align: center;
    line-height: 20px;
    position: absolute;
    color: gray;
    top: 0px;
    right: 0px;
  }
  .hezi img {
    max-width: 100%;
    min-width: 40%;
    max-height: 100%;
    min-height: 40%;
  }
  .renwutopthree {
    width: 612px;
    height: 24px;
    margin: 0 auto;
    text-align: center;
    transition: all 0.5s;
  }
  // 中间内容部分
  .renwucenter {
    width: 670px;
    height: 810px;
    background-color: white;
    margin: 20px auto;
    border-radius: 16px;
  }
  .renwucenter i {
    font-style: normal;
  }
  .tabber-top {
    box-sizing: content-box;
    width: 621px;
    height: 40px;
    margin: 0 auto;
    padding-top: 40px;
  }
  .tabber-top ul {
    display: flex;
    justify-content: flex-start;
    line-height: 40px;
  }
  .tabber-top li {
    width: 112px;
    height: 40px;
    font-size: 28px;
    text-align: center;
  }
  .tabber-top li:nth-child(2) {
    margin-left: 26px;
  }
  .tabber-top span {
    display: block;
    width: 80px;
    height: 4px;
    border-radius: 12px;
    background-color: red;

    border-bottom: 2px solid red;
    margin: 0 auto;
  }
  .tabber-down {
    width: 621px;
    height: 40px;
    margin: 50px auto;

    // background-color: pink;
  }
  .tabber-down li {
    display: flex;
    justify-content: space-between;
    height: 106px;
    // background-color: pink;
    margin-top: 35px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.188);
  }
  .tabber-down #end {
    border-bottom: none;
  }
  .tabber-down span {
    width: 156px;
    height: 100px;
    display: block;
  }
  .tabber-down-one i {
    display: block;
    width: 240px;
    height: 40px;
    // background-color: aqua;
    line-height: 40px;
    font-size: 28px;
  }
  .tabber-down-one strong {
    display: block;
    width: 32px;
    height: 32px;
    margin-top: 14px;
    line-height: 32px;
  }
  .tabber-down-one em {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-top: 14px;
    line-height: 32px;
    font-size: 24px;
  }
  h6 {
    display: flex;
    justify-content: flex-start;
  }
  .tabber-down-two {
    padding-top: 20px;
  }
  .tabber-down-two i {
    display: block;
    width: 118px;
    height: 48px;
    margin: 0 auto;
    text-align: center;
    font-size: 24px;
    line-height: 48px;
    border-radius: 30px;
  }
  .one {
    color: #fff;
    background: linear-gradient(90deg, #63d197 0%, #8eecba 100%);
  }
  .tabber-down-two .two {
    border: 2px solid #63d197;
    color: #63d197;
  }
  .tabber-down-two .five {
    background: linear-gradient(90deg, #a6b3bb 0%, #d5dae0 100%);
    color: #fff;
  }
  .up {
    font-size: 28px;
  }
  .renwucenter-end {
    width: 670px;
    height: 130px;
    background-color: white;
    margin: 20px auto;
    border-radius: 16px;
  }
  .renwucenter-end div {
    width: 600px;
    height: 34px;
    line-height: 130px;
    text-align: center;
    margin: 0 auto;
    font-size: 24px;
  }
  // 点击箭头收缩
  .active {
    height: 0px;
    transition: all 0.5s;
  }
  .activeooo {
    height: 200px;
    transition: all 0.5s;
  }
  .lingqu {
    background: linear-gradient(90deg, #a6b3bb 0%, #d5dae0 100%);
  }
}
</style>